<template>
  <div>
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>净尺寸采集数据</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '0 24px', minHeight: '680px', background: '#fff', marginLeft: '20px'}">
      <Tag class="title" size="medium">毫米波传感器测量值</Tag>
      <Table border :data="tableData1">
        <TableColumn
          prop="type"
          label="尺寸类型"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="value"
          label="测量值"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="unit"
          label="单位"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="date"
          label="更新时间"
          width='300'>
        </TableColumn>
      </Table>
      <Tag class="title" size="medium">Kinect相机测量值</Tag>
      <Table border :data="tableData2">
        <TableColumn
          prop="type"
          label="尺寸类型"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="value"
          label="测量值"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="unit"
          label="单位"
          width='300'>
        </TableColumn>
        <TableColumn
          prop="date"
          label="更新时间"
          width='300'>
        </TableColumn>
      </Table>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'OneDData',
  data() {
    return {
      tableData1: [{
        type: '胸宽',
        unit: 'mm'
      }, {
        type: '胸厚',
        unit: 'mm'
      }, {
        type: '腰宽',
        unit: 'mm'
      }, {
        type: '腰厚',
        unit: 'mm'
      }, {
        type: '臀宽',
        unit: 'mm'
      }, {
        type: '臀厚',
        unit: 'mm'
      }],
      tableData2: [{
        type: '肩宽',
        unit: 'mm'
      }, {
        type: '臂长',
        unit: 'mm'
      }, {
        type: '腿长',
        unit: 'mm'
      }]
    }
  },
  methods: {
    async getOneDimensionData () {
      const res = await this.$http.get('/measure/getOneDimension', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const newTableData2 = []
        let measureData = res.data1
        let keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData1.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = res.data1Date
            newTableData.push(newItem)
          }
        })
        measureData = res.data2
        keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData2.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = res.data2Date
            newTableData2.push(newItem)
          }
        })
        // console.log(newTableData)
        this.tableData1 = newTableData
        this.tableData2 = newTableData2
      }
    }
  },
  mounted () {
    this.getOneDimensionData()
  }
}
</script>
<style scoped lang="less">
  .title {
    margin: 20px 0;
  }
</style>
